<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ page import     = "capaLogica.Ciudad" %>
<%@ page import     = "utiles.FuncionesImpl" %>
<%@ page import     = "java.util.List" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
table.linea{
border-style: solid;
border-width: 1px;
border-color: #FF8000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Nuevo Usuario</title>
<%
		List<Ciudad> ciudades = (List<Ciudad>)request.getAttribute("ciudades");
%>
<script type="text/javascript">
var css="css/estilo.css";
document.write("<link href='" + css + "' rel='stylesheet' type='text/css'>"); 

		function evento(valor){
			if ( valor == "registrarse" ){
				var validar = true;
				var nickname = document.getElementById("nickname").value ;
				var password = document.getElementById("password").value;
				var conf_password = document.getElementById("passConfirmacion").value;
				
				if ( nickname == "" || password == "" || conf_password == "" ){
					alert("Debe introducir todos los datos");
					validar = false;
				}
				
				if ( password != conf_password  ){
					alert("Los password no coinciden");
					validar = false;
				}
				
				if ( validar ){
						document.formulario.action = "usuario?accion=crearUsuario";
						document.formulario.submit();
				}
			}else{
				document.location.href="index.html";
			}
		}

</script>
</head>
<body background="imagenes/dbTransparante.jpg">
<form id="formulario" name="formulario" action="" method="post">
<table width="100%">
	<tr>
		<td width="10%" align="left">
			<img src="imagenes/logo.png">
		</td>
		<td align="left" width="70%">
			<font size="5"><strong>Bienvenidos a DeBolo</strong></font>
		</td>
	</tr>
</table>
<hr color="#FF8000">

<br/>
<table align="center" class="linea" width="300">
	<tr>
		<td colspan="2" width="100%" align="center">
			<font size="5"><strong>Nuevo Usuario</strong></font>
		</td>
	</tr>
	<tr>
		<td width="100%" align="left">
			<strong>Nick:</strong>
		</td>
		<td width="100%" align="left">
			<input type="text" id="nickname" name="nickname" value="" size="15" maxlength="10">
		</td>
	</tr>
	<tr>
		<td width="100%" align="left">
			<strong>Password:</strong>
		</td>
		<td width="100%" align="left">
			<input type="password" id="password" name="password" value="" size="15" maxlength="10">
		</td>
	</tr>
	<tr>
		<td width="100%" align="left">
			<strong>Confirme su password:</strong>
		</td>
		<td width="100%" align="left">
			<input type="password" id="passConfirmacion" name="passConfirmacion" value="" size="15" maxlength="10">
		</td>
	</tr>
	<tr>
		<td width="100%" align="left">
			<strong>Seleccione su Ciudad:</strong>
		</td>
		<td width="100%" align="left">
			<select id="ciudades" name="ciudades">
				<% for(Ciudad c:ciudades){ %>
					<option id="<%=c.getIdCiudad()%>" value="<%=c.getIdCiudad()%>"><%=c.getIdCiudad() %></option>
				<%} %>
			</select>
		</td>
	</tr>
	<tr>
		<td width="100%" align="left">
			<input type="button" id="registrarse" name="registrarse" value="registrarse" onclick="javascript:evento(this.value);">
		</td>
		<td width="100%" align="left">
			<input type="button" id="atras" name="atras" value="atras" onclick="javascript:evento(this.value);">
		</td>
	</tr>
</table>
</form>
</body>
</html>